<template>
  <div style="background-color: #fff">
<!--    <div style="position: sticky;top: 0;z-index: 99">-->
<!--      <Myheader></Myheader>-->
<!--    </div>-->
    <div class="page">
      <h2 style="text-align: center;margin: 12px 0;">{{$route.query.mingcheng}}详情</h2>

      <el-row :gutter="60">
        <el-card>
          <el-carousel :interval="4000" height="400px">
            <el-carousel-item v-for="item in 4" :key="item">
              <img
                :src="`http://localhost:8087/dev-api${classImg[0].zhaopian}`"
                class="image"
              />
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-row>
      <el-divider></el-divider>
      <h2 style="text-align: center;margin: 12px 0;">同学姓名</h2>
      <el-card style="margin-top: 20px;">
        <el-tag
          style="margin: 16px"
          v-for="(item, index) in studentList"
          :key="index"
          type="danger"
          effect="plain"
          @click="viewDetail(item.xuehao)"
          >{{ item.xingming }}</el-tag
        ></el-card
      >
    </div>
<!--    <div>-->
<!--      <MyBottom></MyBottom>-->
<!--    </div>-->
  </div>
</template>

<script>
import Myheader from "./header.vue";
import MyBottom from "./bottom.vue";
import { getStuOfClass, getClassDetail } from "@/api";
export default {
  name: "alumnus",
  data() {
    return {
      studentList: [],
      classImg: []
    };
  },
  components: {
    Myheader,
    MyBottom
  },
  methods: {
    viewDetail(xuehao) {
      this.$router.push({
        path: "/studentDetail",
        query: {
          xuehao: xuehao
        }
      });
    }
  },
  mounted() {
    getStuOfClass({ banjimingcheng: this.$route.query.mingcheng })
      .then(res => {
        console.log("res: ", res);
        this.studentList = res.data;
      })
      .catch(err => {
        console.log(err);
      });
    getClassDetail({ mingcheng: this.$route.query.mingcheng })
      .then(res => {
        console.log("res: ", res);
        this.classImg = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.page {
  padding: 10px 30px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
